{% extends "base.html" %}

{% block title %}工具箱 - 开发工具{% endblock %}

{% block content %}
    <!-- 页面标题 -->
    <div class="bg-blue-600 text-white py-8">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-3xl font-bold">开发工具</h1>
                    <p class="mt-2">提供多种开发辅助工具，提高编程效率，减少重复劳动</p>
                </div>
                <div class="bg-white bg-opacity-20 p-4 rounded-lg hidden md:block">
                    <div class="flex space-x-2 text-sm">
                        <a href="{{ url_for('main.index') }}" class="hover:underline">首页</a>
                        <span>/</span>
                        <span class="font-medium">开发工具</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 主要内容区 -->
    <div class="container mx-auto px-4 py-8">
        <div class="mb-8">
            <h2 class="text-2xl font-bold text-gray-800 mb-4">开发工具集合</h2>
            <p class="text-gray-600 max-w-3xl">
                为开发者提供的实用工具集，帮助您高效地进行代码编写、测试和调试，提升开发效率。无需额外安装软件，随时随地在浏览器中完成开发辅助任务。
            </p>
        </div>
        
        <!-- 工具卡片网格 -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
            <!-- JSON格式化 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <div class="bg-blue-100 p-4">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-500 text-white mx-auto">
                        <i class="fas fa-code-branch text-2xl"></i>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">JSON格式化</h3>
                    <p class="text-gray-600 mb-4">
                        格式化、验证和压缩JSON数据，方便查看复杂的JSON结构，查找格式错误。
                    </p>
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>格式化和美化JSON</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>验证JSON结构</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>压缩JSON数据</span>
                        </div>
                    </div>
                    <a href="{{ url_for('dev_tools.json_formatter') }}" class="block w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white text-center font-medium rounded-md transition-colors">
                        开始使用
                    </a>
                </div>
            </div>
            
            <!-- 代码格式化 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <div class="bg-blue-100 p-4">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-500 text-white mx-auto">
                        <i class="fas fa-code text-2xl"></i>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">代码格式化</h3>
                    <p class="text-gray-600 mb-4">
                        格式化HTML、CSS和JavaScript代码，提高代码可读性和美观度。
                    </p>
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>HTML代码美化</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>CSS代码格式化</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>JavaScript代码美化</span>
                        </div>
                    </div>
                    <a href="{{ url_for('dev_tools.code_formatter') }}" class="block w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white text-center font-medium rounded-md transition-colors">
                        开始使用
                    </a>
                </div>
            </div>
            
            <!-- 正则表达式测试 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <div class="bg-blue-100 p-4">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-500 text-white mx-auto">
                        <i class="fas fa-search text-2xl"></i>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">正则表达式测试</h3>
                    <p class="text-gray-600 mb-4">
                        测试和验证正则表达式，实时查看匹配结果，调试复杂的匹配模式。
                    </p>
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>实时匹配预览</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>常用正则表达式库</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>正则表达式解释</span>
                        </div>
                    </div>
                    <a href="{{ url_for('dev_tools.regex_tester') }}" class="block w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white text-center font-medium rounded-md transition-colors">
                        开始使用
                    </a>
                </div>
            </div>
            
            <!-- 时间戳转换 -->
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
                <div class="bg-blue-100 p-4">
                    <div class="flex items-center justify-center h-16 w-16 rounded-full bg-blue-500 text-white mx-auto">
                        <i class="fas fa-clock text-2xl"></i>
                    </div>
                </div>
                <div class="p-6">
                    <h3 class="text-xl font-bold text-gray-800 mb-2">时间戳转换</h3>
                    <p class="text-gray-600 mb-4">
                        在时间戳和日期时间字符串之间转换，支持多种格式和时区设置。
                    </p>
                    <div class="space-y-2 mb-4">
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>时间戳转日期</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>日期转时间戳</span>
                        </div>
                        <div class="flex items-center text-sm text-gray-500">
                            <i class="fas fa-check text-green-500 mr-2"></i>
                            <span>时区转换</span>
                        </div>
                    </div>
                    <a href="{{ url_for('dev_tools.timestamp_converter') }}" class="block w-full py-2 px-4 bg-blue-500 hover:bg-blue-600 text-white text-center font-medium rounded-md transition-colors">
                        开始使用
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 使用技巧 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4">开发工具使用技巧</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-medium text-gray-800 mb-2">JSON格式化技巧</h4>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>使用格式化功能后，可以点击JSON中的节点展开/折叠复杂结构</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>对于大型JSON，可以使用压缩功能减小数据体积</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium text-gray-800 mb-2">代码格式化技巧</h4>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>可以调整缩进大小和风格，适配您的编码规范</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>格式化前确保代码语法正确，避免因语法错误导致格式化失败</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium text-gray-800 mb-2">正则表达式技巧</h4>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>使用预设模板快速创建常用正则表达式</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>调整标志位（如全局、不区分大小写）查看不同匹配结果</span>
                        </li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium text-gray-800 mb-2">时间戳转换技巧</h4>
                    <ul class="space-y-2 text-gray-600">
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>点击"当前时间"按钮快速获取当前时间的各种表示形式</span>
                        </li>
                        <li class="flex items-start">
                            <i class="fas fa-lightbulb text-yellow-500 mt-1 mr-2"></i>
                            <span>可以查看不同时区下的时间表示，方便国际化开发</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        <!-- 反馈区域 -->
        <div class="bg-gray-100 rounded-lg p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-3">工具反馈</h3>
            <p class="text-gray-600 mb-4">
                我们致力于提供更优质的开发工具，如果您有任何建议或需求，请告诉我们！
            </p>
            <a href="#" class="inline-block py-2 px-6 bg-blue-500 hover:bg-blue-600 text-white font-medium rounded-md transition-colors">
                提交反馈
            </a>
        </div>
    </div>
{% endblock %} 